<template>
  <u-navbar
    placeholder
    :left-text="leftText"
    :title="title"
    :right-text="rightText"
    :right-icon="rightIcon"
    :bg-color="bgColor"
    @leftClick="onLeftClick"
    @rightClick="onRightClick"
  >
    <view
      slot="left"
      class="u-nav-slot"
    >
      <u-icon
        v-if="showLeft"
        :name="leftIcon"
        size="19"
      />
      <!-- <u-line
        direction="column"
        :hairline="false"
        length="16"
        margin="0 8px"
      />
      <u-icon
        name="home"
        size="20"
      /> -->
    </view>
  </u-navbar>
</template>

<script>
export default {
  name: 'UniPageHeader',

  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared'
  },
  // #endif

  props: {
    title: {
      type: String,
      default: ''
    },
    showLeft: {
      type: Boolean,
      default: true
    },
    leftIcon: {
      type: String,
      default: 'arrow-left'
    },
    leftText: {
      type: String,
      default: ''
    },

    rightIcon: {
      type: String,
      default: ''
    },

    rightText: {
      type: String,
      default: ''
    },

    bgColor: {
      type: String,
      default: '#fff'
    },
    
    leftEventCustom: {
      type: Boolean,
      default: false
    },
    
    rightEventCustom: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      
    }
  },

  methods: {
    // 左图标点击事件
    onLeftClick() {
      if (this.leftEventCustom) {
        this.$emit('left:click')
        return
      }
      if (this.leftIcon) {
        this.$utils.navigateBackToPage()
        this.$emit('left:click')
      }
    },

    // 右图标点击事件
    onRightClick() {
      this.$emit('right:click')
    }
  }
}
</script>

<style lang="scss">
	::v-deep.uni-navbar {
		&__content {
			background-color: transparent;
		}

		&__header {
			.uni-nav-bar-text {
				font-size: 16px;
			}
		}

		&__header-btns-right {
			.uniui-search {
				&:active {
					color: #CCC !important;
				}
			}
		}

		.uni-nav-bar-text {
			font-size: 18px;
		}

		.uni-nav-bar-right-text {
			font-size: 16px;
			color: #1890FF !important;
		}

		/*  #ifdef  MP-WEIXIN  */
		.nav-title {
			width: 100%;
			font-size: 16px;
			@include flex-center;
		}

		/*  #endif  */
	}
</style>
